<!-- 科目预算 -->
<template>
  <div class="page">
    <gc-spread-sheets
      :hostClass="hostClass"
      @workbookInitialized="initWorkbook"
    />
  </div>
</template>

<script>
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import * as GC from "@grapecity/spread-sheets";
import "@grapecity/spread-sheets-vue";
import "@grapecity/spread-sheets-resources-zh";
GC.Spread.Common.CultureManager.culture("zh-cn");

export default {
  mounted() {},
  data() {
    return {
      hostClass: "spread-host",
      excelData: {
        area: "云南区域",
        branchOffice: "大华物业锦绣公司",
        branchId: 2,
        projectName: "test-project-08",
        areaInfo: [
          {
            month: "1月",
            budgetYear: "2021",
            dwellingHouse: "1",
            retailShop: "2",
            commerce: "36",
            officeBuilding: "43",
            publicBuildingServices: "56",
            otherHouseholds: "23",
            residentialArea: "45",
            shopArea: "78",
            commercialArea: "98",
            officeArea: "234",
            publicBuildingServiceArea: "123",
            otherArea: "1234",
            parkingPlaceNum: "43",
            undergroundParkingPlaceNum: "123",
            carRentalNum: "123",
            propertyParkingSpace: "123",
          },
        ],
        priceInfo: [
          {
            month: "1月",
            budgetYear: "2021",
            housingAverage: 5.3,
            averageNumberOfShops: 7.2,
            businessAverage: 6.1,
            officeAverage: 5.5,
            publicConstructionServicesAverage: 5.0,
            otherAverage: 5.0,
            unitPrice: 2.0,
            groundCarRentalUnitPrice: 1.8,
            undergroundCarRentalUnitPrice: 1.5,
            groundParkingLotManagementExpense: 2.0,
            propertyParkingSpaceManagementExpense: 5.0,
            parkingPlaceUnitPrice: 300.0,
          },
        ],
        equipment: [
          {
            month: "2月",
            budgetYear: "2021",
            verticalElevator: "15",
            walkingElevator: "2",
            fireFightingSystem: "6",
            alternator: "2",
            centralAirConditioning: "30",
            waterPump: "11",
            fan: "11",
            fireShutter: "32",
            mechanicalParkingSpace: "22",
            highVoltageDistributionCabinet: "43",
            greenMaintenanceArea: "6",
            garageArea: "8",
            entranceAndExit: "5",
            entranceAndExitOfParkingLot: "2",
            fireMonitoringCenter: "2",
            numberOfFireHydrants: "20",
            numberOfFireExtinguishers: "344",
            numberOfFireExtinguisherBoxes: "30",
            propertyManagementFeeIncreases: "2",
            createExcellence: "22",
            energySavingTransformation: "22",
            benchmarkingProject: "22",
          },
        ],
      },
    };
  },
  methods: {
    // initWorkbook: function (spread) {
    //   //initializing
    //   let sheet = spread.getActiveSheet();
    //   sheet.setValue(0, 0, "suzhenwei");
    //   sheet.setValue(1, 1, "1231231231312312313123xx");
    //   sheet.setValue(2, 2, "suzhenwei2");
    //   sheet.getCell(1, 1).wordWrap(true);
    //   sheet.autoFitColumn(1);
    //   sheet.addSpan(0,0,0,1,GC.Spread.Sheets.SheetArea.colHeader);
    // },
    //合并单元格
    // initWorkbook: function (spread) {
    //   //initializing
    //   let activeSheet = spread.getActiveSheet();
    //   activeSheet.setRowCount(4, 1);
    //   activeSheet.setColumnCount(4, 2);
    //   activeSheet.addSpan(0, 0, 3, 3, GC.Spread.Sheets.SheetArea.colHeader);
    // //   activeSheet.addSpan(0, 0, 3, 3, GC.Spread.Sheets.SheetArea.rowHeader);
    //   activeSheet.addSpan(0, 0, 3, 3, GC.Spread.Sheets.SheetArea.viewport);
    //   activeSheet.addSpan(4, 4, 4, 10, GC.Spread.Sheets.SheetArea.viewport);
    // },
    // 绑定数据
    // initWorkbook: function (spread) {
    //   //initializing
    //   let sheet = spread.getActiveSheet();
    //   var dataArray = [
    //     {"month":"kk1"},
    //     {"month":"kk2"},
    //     {"month":"kk3"},
    //     {"month":"kk4"},
    //   ];
    // for(var i = 0;i< dataArray.length;i++) {
    //     let obj = dataArray[i];
    //     sheet.setValue(i, 0,obj['name']);
    // }

    //   //   sheet.setDataSource(source);
    // },
    // 绑定数据2
    initWorkbook: function (spread) {
      let activeSheet = spread.getActiveSheet();
      activeSheet.autoGenerateColumns = true;
      let tab01 = activeSheet.table.add("activeSheet", 0, 0, 4, 4);
      var dataArray = [
        { month: "kk1" },
        { month: "kk2" },
        { month: "kk3" },
        { month: "kk4" },
        { month: "kk4" },
        { month: "kk4" },
        { month: "kk4" },
        { month: "kk4" },
        { month: "kk4" },
        { month: "kk4" },
      ];
      
      //   //initializing
      //   var test = [
      //     { size: 80, displayName: "编制项目", name: "month" },
      //     { size: 80, displayName: "1月", name: "month" },
      //     { size: 80, displayName: "2月", name: "month" },
      //     { size: 80, displayName: "3月", name: "month" },
      //     { size: 80, displayName: "4月", name: "month" },
      //     { size: 80, displayName: "5月", name: "month" },
      //     { size: 80, displayName: "6月", name: "month" },
      //     { size: 80, displayName: "7月", name: "month" },
      //     { size: 80, displayName: "8月", name: "month" },
      //     { size: 80, displayName: "9月", name: "month" },
      //     { size: 80, displayName: "10月", name: "month" },
      //     { size: 80, displayName: "11月", name: "month" },
      //     { size: 80, displayName: "12月", name: "month" },
      //     { size: 80, displayName: "合集", name: "month" },
      //   ];

      //   activeSheet.setDataSource(dataArray);
      //   activeSheet.bindColumns(test);

      activeSheet.table.add("activeSheet", 1, 1, 10, 5);
    },
  },
};
</script>


<style scoped>
.spread-host {
  width: 100%;
  height: 600px;
}
</style>